#@layoutUser()
#define mainUser()

<div class="layui-tab layui-tab-brief" lay-filter="user">
    <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar" class="">头像</li>
        <li lay-id="pass" class="">密码</li>
    </ul>
    <div class="layui-tab-content" style="padding: 20px 0;">
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
            <form method="post" action="/user/userSetData">
            	<input type="hidden" name="user.uid" value="#(userMsg.uid??)" />
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">个人邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" id="user.email" name="user.email" required="" lay-verify="email" value="#(userMsg.email??)" class="layui-input" disabled=""
                        style="cursor: not-allowed !important;">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span style="color: #5FB878">您的邮箱已激活，可进行发帖等操作。 </span>邮箱不支持修改。
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label">个人昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="user.username" name="user.username" required="" lay-verify="required" value="#(userMsg.username??)" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                    <input type="radio" name="user.sex" value="男" title="男" 
                    #if( userMsg.sex ?? == '男' )
                        checked=""
                    #end ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
                    <input type="radio" name="user.sex" value="女" title="女" 
                    #if( userMsg.sex ?? == '女' )
                        checked=""
                    #end ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="L_sign" class="layui-form-label">个人签名</label>
                    <div class="layui-input-block">
                        <textarea placeholder="随便写些什么刷下存在感" id="user.sign" name="user.sign" autocomplete="off"
                        class="layui-textarea" style="height: 80px;">#(userMsg.sign??)</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit="">确认修改</button>
                </div>
            </form>
        </div>
        <div class="layui-form layui-form-pane layui-tab-item">
            <div class="layui-form-item">
                <div class="avatar-add">
                <form id="avatar_upload_form" action="/user/uploadAvatar" method="POST" enctype="multipart/form-data">
					<input type="hidden" name="user.uid" value="#(userMsg.uid??)" />
					<img alt="用户头像" src="/upload/avatar/#(userMsg.image_name??)" style=" padding-bottom: 20px; margin-left:35%;">
					<table width="100%">
						<tbody>
							<tr>
								<td style="width: 38%; text-align: right; padding-right: 15px;">图片文件(不能超过1024k)：</td>
								<td style="width: 40%;"><input type="file" name="avatar" style="width: 90%;"></td>
								<td><input id="upload_btn" type="submit" value="上传" style="font-weight:bold; padding:0 11px 0 9px;"></td>
							</tr>
						</tbody>
					</table>
				</form>
                </div>
                
             <!-- 图像预览与裁切区域 -->
			<div class="avatar-preview-crop-box">
					<img id="jcrop_target"  />
			</div>

			<!-- 图像裁切参数保存区域 -->
			<div id="avatar_save_box" class="avatar-crop-data-save-box">
				<form id="avatar_save_form" action="/user/saveAvatar" method="post">
					<input type="hidden" id="x" name="x" />
					<input type="hidden" id="y" name="y" />
					<input type="hidden" id="width" name="width" />
					<input type="hidden" id="height" name="height" />
					<input id="avatar_save_btn" type="submit" value="保存选中区域" style="padding:2px 10px; font-weight:bold;"/>
				</form>
			</div>
                
            </div>
        </div>
        
        <div class="layui-form layui-form-pane layui-tab-item">
        	<form action="/user/userSetPassword" method="post" id="password_update_form">
        	<input type="hidden" name="user.uid" value="#(userMsg.uid??)" />
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">原始密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="oldPassword" name="oldPassword" required="" lay-verify="pass" placeholder="请输入原始的密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">密码必须6到16位，且不能出现空格</div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">更改密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="newPassword" name="newPassword" required="" lay-verify="pass" placeholder="请输入要更改的密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit="">确认修改</button>
            </div>
            </form>
        </div>
    </div>
</div>


#end
#define js()
<script type="text/javascript" src="/static/jquery_form/jquery.form.min.js"></script>
<link  rel="stylesheet" type="text/css" href="/static/jcrop/css/jquery.Jcrop.min.css">
<script type="text/javascript" src="/static/jcrop/js/jquery.Jcrop.min.js"></script>
<script>
layui.use(['form', 'layedit', 'laydate','upload'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,upload = layui.upload;
  
  //自定义验证规则
  form.verify({
	pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到16位，且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
});

//使用 ajax form 提交密码修改
$(document).ready(function() {
	$("#password_update_form").ajaxForm({
		dataType: "json"
		, beforeSubmit: function(formData, jqForm, options) {
		}
		, success: function(ret) {
			if (ret.state == "ok") {
				showOkMsg(ret.msg);
			} else {
				showErrorMsg(ret.msg);
			}
		}
		, error: function(ret) {
			alert(ret.msg);
		}
	});
});

//密码修改成功返回信息
function showOkMsg(msg) {
	layer.msg(msg, {
				shift: 0
				, shade: 0.4
				, time: 0
				, offset: "140px"
				, closeBtn: 1
				, shadeClose: false
				,maxWidth: "1000"
			}, function () {
				location.href = "/user/login";
			}
	);
}
//密码修改失败返回信息
function showErrorMsg(msg) {
	layer.msg(msg, {
				shift: 6
				, shade: 0.4
				, time: 0
				, offset: "140px"
				, closeBtn: 1
				, shadeClose: true
				,maxWidth: "1000"
			}, function () {}
	);
}

//修改用户的头像JS
// 使用 ajax form 上传文件
		$(document).ready(function() {
			// ajaxForm 可以是无参或者一个参数，参数只能是一个回调或json options，支持 jquery $.ajax的所有参数
			$("#avatar_upload_form").ajaxForm({
				dataType: "json",
				// 在对表单域进行序列化之前回调
				beforeSerialize: function($form, options) {
					// 用于操作ueditor这样的编辑器向隐藏域写入数据
					// editor.sync();
					//获取html内容
					// var html = ue.getContent();
					//获取纯文本内容，返回: hello
					// var txt = ue.getContentTxt();
					// target.val(html);    // 设置到 hidden 域
				},
				// 这里可做一些 validator的工作，必须要返回 false 才不会提交表单
				beforeSubmit: function(formData, jqForm, options) {
					// var queryString = $.param(formData);
					// var formElement = jqForm[0];

					var uploadBtn = $("#upload_btn");
					uploadBtn.attr("disabled", true);
					uploadBtn.val("正在上传，请稍候...");
					return true;
				},
				success: function(ret) {
					if(ret.state == "ok") {
						var jcropTarget = $("#jcrop_target");
						jcropTarget.attr("src", ret.avatarUrl + "?r="+Math.random());
						jcropTarget.show();
						callJcrop();
						$("#upload_btn").hide();
						$("#avatar_save_box").show();
					} else {
						showErrorMsg(ret.msg);
						var uploadBtn = $("#upload_btn");
						uploadBtn.val("上传");
						uploadBtn.attr("disabled", false);
					}
				},
				error: function(ret) {  // 仅做为示例，只要后端是 status 200，就不会调用
					showErrorMsgImg(ret.msg);
				}
			});
		});

		function callJcrop() {
			$('#jcrop_target').Jcrop({
				setSelect: [ 30, 30, 250, 250 ],
				minSize:[30,30],
				aspectRatio: 1,
				onSelect: updateCoords,
				onChange: updateCoords
			});
		}
		function updateCoords(c){
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#width').val(c.w);
			$('#height').val(c.h);
		}

		// 使用 ajax form 提交图像裁剪坐标
		$(document).ready(function() {
			$("#avatar_save_form").ajaxForm({
				dataType: "json",
				beforeSubmit: function(formData, jqForm, options) {
				},
				success: function(ret) {
					$("#working_box").hide();
					if (ret.state == "ok") {
						showOkMsgImg(ret.msg);
					} else {
						showErrorMsgImg(ret.msg);
					}
				},
				error: function(ret) {
					showErrorMsgImg(ret.msg);
				}
			});
		});

		function showOkMsgImg(msg) {
			layer.msg(msg, {
						shift: 0
						, shade: 0.4
						, time: 0
						, offset: "140px"
						, closeBtn: 1
						, shadeClose: false
						,maxWidth: "1000"
					}, function () {
						location.href = "/user/userSetPersonal";
					}
			);
		}

		function showErrorMsgImg(msg) {
			layer.msg(msg, {
					shift: 6
					, shade: 0.4
					, time: 0
					, offset: "140px"
					, closeBtn: 1
					, shadeClose: true
					,maxWidth: "1000"
				}, function () {}
			);
		}
</script>

#end